import React, { Component } from 'react';
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.css'
import './banner.css'

const SwiperItem = (props) =>{
    return (
        <div className="swiper-slide">
            <img src={props.src} alt=""/>
        </div>
    )
}


class banner extends Component {
constructor(props){
    super(props)
    this.state = {
        banner:[]
    }
}

componentWillMount(){
    fetch("/data/banner.json")
    .then(res=>res.json())
    .then(result=>{
        this.setState({
            banner:result
        })
        setTimeout(()=>{
           new Swiper ('.swiper-container', {
                loop: true, // 循环模式选项
                autoplay: true,
                // 如果需要分页器
                pagination: {
                  el: '.swiper-pagination',
                }
 
              })        
        },0)
    })
    .catch(err=>{console.log(err)})
}

renderItem(){
    // console.log(this.state.banner)
    if(this.state.banner.length){
      return this.state.banner.map((item)=>{
        return <SwiperItem key = {item.id} src = {item.src}/>
      })
    }
}

    render() {
        return (
        <div className="swiper-container">
            <div className="swiper-wrapper">
                {this.renderItem()} 
            </div>
            <div className="swiper-pagination"></div>
        </div>
        );
    }
}

export default banner;
